<template>
    <div>
        <pagetitle type="2"></pagetitle>
        <div class="msgcenter">
            <div class="msgNav">
                <div class="msgNavTab">
                    <div class="tabItem" :class="pageData.queryData.type == item.val ? 'selectItem' : ''" @click="selectType(item.val)" v-for="(item, index) in pageData.msgType" :key="index">
                        {{ item.name }}
                    </div>
                    <!-- <div class="tabItem">个人消息</div>
                    <div class="tabItem">团队消息</div> -->
                </div>
                <el-input placeholder="请输入关键词" class="msgNavsearch" v-model="pageData.queryData.title">
                    <template #suffix>
                        <el-icon class="el-input__icon" @click="paginaClick(1)"><search /></el-icon>
                    </template>
                </el-input>
            </div>
            <!-- <div class="nodata">
                <el-image class="nodataimg" :src="require('@/assets/image/nodataimg.png')" fit="cover"></el-image>
                <p>暂无数据</p>
            </div> -->
            <div class="msgCont">
                <div class="contLeft">
                    <div class="cont">
                        <div class="contItem" v-if="pageData.list.length > 0">
                            <div>
                                <el-checkbox v-model="pageData.selectAll" :indeterminate="pageData.isIndeterminate" @change="selectAllChange"></el-checkbox>
                                <sxnfbtn style="margin-left: 20px" @click="readMessage">标为已读</sxnfbtn>
                                <sxnfbtn @click="deleteMessage">删除</sxnfbtn>
                            </div>
                        </div>
                        <el-scrollbar class="contLeftscrollbar">
                            <div class="contItem" :class="pageData.msgDetails.noticeId == item.noticeId ? 'lookItems' : ''" v-for="(item, index) in pageData.list" :key="index">
                                <el-checkbox v-model="item.checked" @change="itemCheckedChange"></el-checkbox>
                                <div class="itemTitle" @click="lookMessages(item)">
                                    <div class="title text-overflow1"><span v-if="item.isRead == 2">●</span>{{ item.title }}</div>
                                    <div class="time">{{ item.publishTime }}</div>
                                </div>
                            </div>
                        </el-scrollbar>
                    </div>
                    <div class="paginations">
                        <pagination style="padding: 0" :totalNum="pageData.total" @paginaClick="paginaClick"></pagination>
                    </div>
                </div>
                <div class="contRight">
                    <el-scrollbar class="contRightscrollbar" v-if="pageData.msgDetails">
                        <div class="rightTitle">
                            <div class="title">{{ pageData.msgDetails.title }}</div>
                            <div class="described">
                                <span>发布于{{ pageData.msgDetails.publishTime }}</span>
                                <span>{{ pageData.msgDetails.type == 1 ? "团队消息" : "个人消息" }}</span>
                            </div>
                        </div>

                        <div class="rightcontext">{{ pageData.msgDetails.content }}</div>
                    </el-scrollbar>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import Sxnfbtn from "@/components/sxnfbtn.vue";
import { reactive, watch, ref } from "vue";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute } from "vue-router";
import { getInformList, markRead, deleteMsg, looks } from "@/api/inform";
const store = useStore();
const route = useRoute();
const pageData: any = reactive({
    msgType: [
        {
            name: "全部消息",
            val: "",
        },
        {
            name: "个人消息",
            val: "2",
        },
        {
            name: "团队消息",
            val: "1",
        },
    ],
    queryData: {
        type: "",
        pageNum: 1,
        pageSize: 10,
        teamId: store.getters.mainTeamId,
        title: "",
        isRead: route.query.isRead ? route.query.isRead : "",
    },
    selectAll: false,
    list: [],
    total: 0,
    msgDetails: "",
    isIndeterminate: false,
});
const selectType = (i: string) => {
    pageData.queryData.type = i;
    paginaClick(1);
};
const getPageData = () => {
    getInformList(pageData.queryData).then((res) => {
        pageData.list = res.data.list;
        pageData.total = res.data.total;
        pageData.list.forEach((v: any) => {
            v.checked = false;
        });
        // lookMessages(pageData.list[0]);
    });
};
getPageData();
// 查看消息
const lookMessages = (item: any) => {
    looks({
        noticeId: item.noticeId,
    }).then((res) => {
        pageData.msgDetails = res.data;
        markRead({
            noticeIds: [item.noticeId],
        }).then((res) => {
            item.isRead = "1";
            console.log(res);

            // 获取是否有未读消息
            store.commit("getUnreadInform", store.getters.mainTeamId);
        });
    });
};
// 监听是否全选
const selectAllChange = () => {
    pageData.list.forEach((v: any) => {
        v.checked = pageData.selectAll;
    });
    pageData.isIndeterminate = false;
};
const itemCheckedChange = () => {
    let data: any = [];
    pageData.list.forEach((v: any) => {
        data.push(v.checked);
    });
    if (data.includes(false)) {
        pageData.selectAll = false;
        if (data.includes(true)) {
            pageData.isIndeterminate = true;
        } else {
            pageData.isIndeterminate = false;
        }
    } else {
        pageData.isIndeterminate = false;
        pageData.selectAll = true;
    }
};
// 标记已读
const readMessage = () => {
    getCheckedData((data: any) => {
        console.log(data);
        markRead({
            noticeIds: data,
        }).then((res) => {
            ElMessage.success("操作成功");
            getPageData();

            // 获取是否有未读消息
            store.commit("getUnreadInform", store.getters.mainTeamId);
        });
    });
};
// 删除
const deleteMessage = () => {
    getCheckedData((data: any) => {
        deleteMsg({
            noticeIds: data,
        }).then((res) => {
            ElMessage.success("操作成功");
            if (pageData.queryData.pageNum > 1 && pageData.list.length == 1) {
                pageData.queryData.pageNum -= 1;
            }
            getPageData();

            // 获取是否有未读消息
            store.commit("getUnreadInform", store.getters.mainTeamId);
        });
    });
};
// 获取复选框数据
const getCheckedData = (callBack: Function) => {
    let data: any = [];
    pageData.list.forEach((v: any) => {
        if (v.checked) {
            data.push(v.noticeId);
        }
    });
    if (data.length == 0) {
        ElMessage.error("请先选择要操作的数据");
    } else {
        callBack(data);
    }
};
// 分页
const paginaClick = (val: number) => {
    pageData.queryData.pageNum = val;
    getPageData();
};
const reads = ref(route.query.isRead);
watch(
    () => route.query.isRead,
    (newData: any) => {
        pageData.queryData.isRead = route.query.isRead;
        paginaClick(1);
        pageData.isIndeterminate = false;
    },
    { immediate: true, deep: true }
);
</script>
<style lang="scss" scoped>
.msgcenter {
    background: #ffffff;
    border-radius: 5px;
    width: 100%;
    height: calc(100vh - 131px);
    box-shadow: var(--el-box-shadow-light);
    .msgNav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        border-bottom: 1px solid #eeeeee;
        .msgNavTab {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .tabItem {
                margin-right: 20px;
                color: #666666;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                padding: 20px 0;
            }
            .selectItem {
                color: #299c37;
                position: relative;
                &::after {
                    height: 2px;
                    background: #299c37;
                    width: 100%;
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: 0;
                }
            }
        }
        .msgNavsearch {
            width: 240px;
            .el-input__icon {
                cursor: pointer;
            }
        }
    }
    .msgCont {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        height: calc(100% - 62px);
        .contLeft {
            width: 455px;
            height: 100%;
            .cont {
                border-right: 1px solid #eeeeee;
                height: calc(100% - 92px);
                width: 100%;
                .contItem {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 20px;
                    border-bottom: 1px solid #eeeeee;
                    .btn {
                        width: 76px;
                        height: 32px;
                        border-radius: 2px;
                        border: 1px solid #cccccc;
                        text-align: center;
                        line-height: 32px;
                        color: #333333;
                        font-size: 14px;
                        cursor: pointer;
                    }
                    .itemTitle {
                        margin-left: 20px;
                        cursor: pointer;
                        .title {
                            width: 375px;
                            margin-bottom: 10px;
                            color: #333333;
                            font-size: 14px;
                            span {
                                color: red;
                                margin-right: 5px;
                            }
                        }
                        .time {
                            color: #999999;
                            font-size: 12px;
                        }
                    }
                }
                .lookItems {
                    background: #e9f7ed;
                }
                .contLeftscrollbar {
                    height: calc(100% - 72px);
                }
            }

            // .paginations {
            //     // padding: 20px;

            // }
        }
        .contRight {
            width: 100%;
            padding-left: 50px;
            height: 100%;
            overflow: hidden;
            padding-bottom: 20px;
            .rightTitle {
                padding: 20px;
                padding-left: 0;
                border-bottom: 1px solid #eeeeee;
                .title {
                    color: #333333;
                    font-size: 18px;
                    font-weight: 500;
                }
                .described {
                    color: #666666;
                    font-size: 12px;
                    margin-top: 5px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    span {
                        margin-right: 20px;
                        &:last-child {
                            font-weight: bold;
                        }
                    }
                }
            }
            .rightcontext {
                padding-right: 20px;
                padding-top: 20px;
                text-align: justify;
            }
        }
    }
    .nodata {
        text-align: center;
        color: #666666;
        .nodataimg {
            width: 280px;
            margin-bottom: 60px;
            margin-top: 80px;
        }
    }
}
</style>
